<script setup>
import { ref, reactive } from 'vue'
const user = reactive({
    firstName: 'chen',
    lastName: 'pu',
})

function fullName() {
    return user.firstName + ' ' + user.lastName
}

</script>


<template>
    <div>
        <h1>姓名：{{ user.firstName + user.lastName}}</h1>
            <div class="input_name">
                <div>姓：<input type="text" v-model="user.firstName"></div>
                <br>
                <div>名：<input type="text" v-model="user.lastName"></div>
            </div>
        <h1>姓名：{{ fullName() }}</h1>
    </div>

</template>

<style scoped>
.input_name {
    margin-top: 20px;
    padding: 20px; 
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

</style>